import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
import { ApiService } from '@core/services/http/api.service';


@Component({
  selector: 'apes-layered',
  template: `
    <div class="apes-layered">
      <ng-container *ngIf="data.length == 0">
        <div class="apes-layered-empty">
          <apes-empty></apes-empty>
        </div>
      </ng-container>
      <ng-container *ngIf="data.length != 0">
        <apes-collapse [apesBordered]="true">
          <apes-collapse-panel *ngFor="let panel of data,let i = index;"
                               [apesHeader]="headerTemplate"
                               [apesShowArrow]="false"
                               [apesActive]="panel.active"
                               (click)="clickStop($event)">

            <!-- 头部 -->
            <ng-template #headerTemplate>
              <div class="apes-layered-header" (click)="clickStop($event)">
                <div class="apes-layered-title">
                  <div class="apes-layered-header-icon" (click)="clickDown($event,panel)">
                    <i *ngIf="!panel.active && !panel.isLeaf && !panel.isLoading" apes-icon apesType="caret-right"></i>
                    <i *ngIf="panel.active && !panel.isLeaf && !panel.isLoading" apes-icon apesType="caret-down"></i>
                    <i *ngIf="panel.isLoading" apes-icon apesType="sync" [apesSpin]="true"></i>
                  </div>
                  <ng-container *ngFor="let ti of panel.title">
                    <div *ngIf="checkTypeof(ti,'string')" class="apes-layered-title-text">{{ti}}</div>
                  </ng-container>
                  <div *ngIf="panel.isLeaf" class="apes-layered-title-tag">
                    <apes-tag [apesColor]="'indigo'">末级</apes-tag>
                  </div>
                </div>
                <div class="apes-layered-subtitle">{{panel.subtitle}}</div>
              </div>
            </ng-template>

            <!-- 子级部分 -->
            <ng-container *ngIf="panel.childPanel && panel.childPanel.length > 0" class="apes-layered">
              <apes-layered [data]="panel.childPanel" [options]="options"></apes-layered>
            </ng-container>
          </apes-collapse-panel>
        </apes-collapse>
      </ng-container>
    </div>
  `,
  host: {},
})

export class ApesLayeredComponent implements OnInit, AfterViewInit {

  @Input() data: any[] = [];
  @Input() options: any;

  constructor(
    private apiService: ApiService) {
  }

  ngOnInit(): void {

  }

  ngAfterViewInit() {
  }

  checkTypeof(data, type) {
    return typeof data == type;
  }

  clickStop(e) {
    e.stopPropagation();
    e.preventDefault();
  }

  clickDown(e, data) {
    this.clickStop(e);
    data.active = !data.active;
    this.clickActive(e, data);
  }

  clickActive(e, data) {
    if (!data.hasOwnProperty('childPanel')) {
      this.queryData(data);
    }
  }

  private queryData(data) {
    data['isLoading'] = true;

    const sendData = {};
    sendData['condition'] = data.condition;
    sendData['queryid'] = this.options['api'];
    sendData['customAction'] = this.options['customAction'];
    sendData['customQuery'] = this.options['customQuery'];
    this.apiService.post('pub.query', { 'body': JSON.stringify(sendData) })
      .subscribe((body) => {
          if (body) {
            console.log('查询结果', body);
            data['childPanel'] = body;
            data['active'] = true;
            if (body.length == 0) {
              data['isLeaf'] = true;
            }
            data['isLoading'] = false;
          }
        },
      );
  }
}
